<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeditable Edit In Place Demo</title>

<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(function() {
        
  $(".editable_select").editable('clickAndSave?mode=click&table=&field=', { 
    indicator : 'Saving...',
    data   : "{'Trần Quang Khải':'Khải','Lê Anh Huy':'Huy','Phạm Viết Văn':'Văn'}",
    type   : "select",
    submit : "OK",
    style  : "inherit",
    tooltip   : "Click to select...",
    	callback : function(value, settings) {
            console.log(this);
            console.log(value);
            console.log(settings);
  	
  		var respon=eval('['+value+']');
  		if(respon[0].success!='1')
  			{
  				alert('can not be empty');
  		 		$('#'+respon[0].id).text(respon[0].old);
  			}
  		
  	
        },
        submitdata : function(value, settings) {
        	
        	  
              	return {old: value};
              
          }
  });
  $(".editable_select_json").editable('clickAndSave?mode=click&table=&field=', { 
    indicator : 'Saving...',
   // loadurl : "http://www.appelsiini.net/projects/jeditable/php/json.php",
    data   : "{'A':'A','B':'B','C':'C','D':'D','E':'E'}",
    type   : "select",
    submit : "OK",
    style  : "inherit",
    tooltip   : "Click to select...",
    callback : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
	
		var respon=eval('['+value+']');
		if(respon[0].success!='1')
			{
				alert('can not be empty');
		 		$('#'+respon[0].id).text(respon[0].old);
			}
		
	
    },
    submitdata : function(value, settings) {
    	
    	  
          	return {old: value};
          
      }
  });
  $(".editable_textarea").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
      type   : 'textarea',
      submitdata: { _method: "put" },
      select : true,
      submit : 'OK',
      cancel : 'cancel',
      cssclass : "editable"
  });
  $(".editable_textile").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
  //    loadurl   : "http://www.appelsiini.net/projects/jeditable/php/load.php",
      type      : "textarea",
      rows	:3,
      submit    : "OK",
      cancel    : "Cancel",
      tooltip   : "Click to edit...",
      callback : function(value, settings) {
          console.log(this);
          console.log(value);
          console.log(settings);
	
		var respon=eval('['+value+']');
		if(respon[0].success!='1')
			{
				alert('can not be empty');
		 		$('#'+respon[0].id).text(respon[0].old);
			}
		
	
      },
      submitdata : function(value, settings) {
      	
      	  
            	return {old: value};
            
        }
  });
  
  $(".click").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
      tooltip   : "Click to edit...",
   //   submitdata : {foo: "bar"},
      style  : "inherit",
      callback : function(value, settings) {
          console.log(this);
          console.log(value);
          console.log(settings);
	
		var respon=eval('['+value+']');
		if(respon[0].success!='1')
			{
				alert('can not be empty');
		 		$('#'+respon[0].id).text(respon[0].old);
			}
		
	
      },
      submitdata : function(value, settings) {
      	
      	  
            	return {old: value};
            
        }
  });
  $(".dblclick").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
      tooltip   : "Doubleclick to edit...",
      event     : "dblclick",
      style  : "inherit",
      callback : function(value, settings) {
          console.log(this);
          console.log(value);
          console.log(settings);
	
		var respon=eval('['+value+']');
		if(respon[0].success!='1')
			{
				alert('can not be empty');
		 		$('#'+respon[0].id).text(respon[0].old);
			}
		
	
      },
      submitdata : function(value, settings) {
      	
      	  
            	return {old: value};
            
        }
  });
  $(".mouseover").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
      tooltip   : "Move mouseover to edit...",
      event     : "mouseover",
      style  : "inherit",
      callback : function(value, settings) {
          console.log(this);
          console.log(value);
          console.log(settings);
	
		var respon=eval('['+value+']');
		if(respon[0].success!='1')
			{
				alert('can not be empty');
		 		$('#'+respon[0].id).text(respon[0].old);
			}
		
	
      },
      submitdata : function(value, settings) {
      	
      	  
            	return {old: value};
            
        }
  });
  
  /* Should not cause error. */
  $("#nosuch").editable('clickAndSave?mode=click&table=&field=', { 
      indicator : 'Saving...',
      type   : 'textarea',
      submit : 'OK',
      
  });

});

</script>

<style type="text/css">
#sidebar {
  width: 0px;
}

#content {
  width: 770px;
}

.editable input[type=submit] {
  color: #F00;
  font-weight: bold;
}
.editable input[type=button] {
  color: #0F0;
  font-weight: bold;
}

</style>

</head>
<h2>Select</h2>
	
    <p><b class="editable_select" id="select_1" style="display: inline"> select man!</b> is a handsome boy, but has no girlfriends!</p>    
	<p><b class="editable_select_json" id="select_2" style="display: inline"> E!</b> is a nice character!</p>
    <h2>Multiline</h2>
    <div class="editable_textile" id="paragraph_2"> Anh chưa từng làm thơ từ trước.Bởi vì em - ý thơ của anh còn ở tận nơi đâu.Lời thơ anh nào phải một nhịp cầu.Mà đọng vọng người thơ về với người thơ. Hãy gọi là HẠNH NGỘ.  </div>
	

    <h2>Different events</h2>
    <p>
      <b class="click" id="b1" style="display: inline">Click me if you dare!</b></> or maybe you should 
      <b class="dblclick" id="b2" style="display: inline">doubleclick</b> instead? Really lazy people can just
      <b class="mouseover" id="b3" style="display: inline">mouseover me</b>...
    </p>
    
    </div>
    <div id="sidebar"> 

  </div>
  
  <div id="footer">
  </div>

<!--   <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> -->
  <script type="text/javascript">
    _uacct = "UA-190966-1";
    urchinTracker();
  </script>

</body>
<!-- <body> -->
<!--   <div class="edit" id="div_1">Dolor</div> -->
<!-- <div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer  -->
<!-- adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore  -->
<!-- magna aliquam erat volutpat.</div> -->
<!-- <wicket:panel> -->

<!--         <span wicket:id="divLabel"></span> -->

<!--     </wicket:panel> -->
<!-- </body> -->
</html>
